<template>
 <div class="root-container">
   <div class="root-header">
     <my-header></my-header>
   </div>
   <div class="page" ref="page">
     <keep-alive>
       <router-view></router-view>
     </keep-alive>
   </div>
   <player></player>
 </div>
</template>

<script>
  import MyHeader from "@/components/head/MyHeader";
  import Player from "@/components/player/Player";
  import {playListMixin} from "@/common/js/mixin";

  export default {
      components: {MyHeader,Player},
      mixins: [playListMixin],
      methods: {
          handlePosition() {
              this.$refs.page.style.bottom = '60px'
          }
      }
  }
</script>

<style lang="stylus">
 .root-container
  height 100vh
  .root-header
    height 64px
    overflow hidden
  .page
    position fixed
    top 80px
    bottom 0
    left 0
    right 0
    overflow hidden

</style>
